<template>
	<div class="login_page fillcontain">
		<transition name="form-fade" mode="in-out">
			<section class="form_contianer" v-show="showLogin">
				<div class="manage_tip">
					<p>欢迎来到人人招聘</p>
				</div>
				<el-form :model="loginForm" :rules="logintype?rules:rules1" ref="loginForm">
					<div class="rows flex">
						<div class="item" :class="active==0?'active':''" @click="active=0">我要找工作</div>
						<div class="item" :class="active==1?'active':''" @click="active=1">我要招人才</div>
					</div>
					<el-form-item prop="username" class="iconrow">
						<img src="../../static/image/account.png" alt="" class="icon">
						<el-input v-model="loginForm.username" placeholder="请输入手机号/邮箱号" class="elinput"><span>dsfsf</span></el-input>
					</el-form-item>
					<el-form-item prop="password" class="iconrow" v-if="logintype">
						<img src="../../static/image/password.png" alt="" class="icon">
						<el-input type="password" placeholder="请输入密码" class="elinput" v-model="loginForm.password"></el-input>
					</el-form-item>

					<el-form-item prop="code" class="iconrow" v-else>
						<img src="../../static/image/password.png" alt="" class="icon">
						<el-input type="text" placeholder="请输入验证码" class="elinput" v-model="loginForm.code"></el-input>
						<span class="getcode">获取验证码</span>
					</el-form-item>
					<div class="com_userType" v-if="active==1">
						<el-radio v-model="com_userType" size="medium" label="company">我是企业</el-radio>
						<el-radio v-model="com_userType" size="medium" label="lietou">我是猎头</el-radio>
					</div>
					<div class="caozuo flex">
						<div class="item" @click="logintype=!logintype">{{logintype==false?'账号登录':'验证码登录'}}</div>
						<div class="item" @click="goRegester()">我要注册</div>
					</div>
					<el-form-item>
						<el-button type="primary" @click="submitForm('loginForm')" class="submit_btn">立即登录</el-button>
					</el-form-item>
					<div class="tip">
						登录即代表同意<span>《隐私政策》</span>和<span>《用户条款》</span>
					</div>
				</el-form>
			</section>
		</transition>
	</div>
</template>

<script>
	import {
		login,
		memberLogin,
		GetCompanyInfo
	} from '@/api/getData'
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				com_userType: 'company',
				logintype: true, //true账号登录 false 验证码登录
				active: 0, //0用户  1企业
				loginForm: {
					username: '',
					password: '',
					code: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				rules1: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
				},
				showLogin: false,
			}
		},
		mounted() {
			this.showLogin = true;
		},
		watch: {
			active: function(newVal) {
				this.loginForm = {
					username: '',
					password: '',
					code: ''
				}
			}
		},
		methods: {
             ...mapMutations(['saveAdminInfo']),
			async GetCompanyInfo() {
				const res = await GetCompanyInfo();
				if (res.code == 1) {
					console.log(res.data);
					this.info = res.data;
					this.saveAdminInfo(this.info);
					
					
					
					
				} else {

				}
			},
			//跳转注册
			goRegester() {
				let that = this;
				if (that.active == 1) {
					that.goUrl('/regester');
				} else {
					that.goUrl('/userRegester');
				}
			},
			goUrl(url) {
				this.$router.push({
					path: url
				})
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						if (this.active == 0) {
							const res = await memberLogin({
								userName: this.loginForm.username,
								password: this.logintype ? this.loginForm.password : this.loginForm.code,
								loginType: this.logintype ? 0 : 1,
								userType: 'member'
							})
							if (res.code == 1) {
								this.$message({
									type: 'success',
									message: '登录成功'
								});

								sessionStorage.setItem('token', res.data.token);
								this.$router.push('manage')
							} else {
								this.$message({
									type: 'error',
									message: res.msg
								});
							}
						} else {
							const res = await login({
								userName: this.loginForm.username,
								password: this.logintype ? this.loginForm.password : this.loginForm.code,
								loginType: this.logintype ? 0 : 1,
								userType: this.com_userType
							})
							if (res.code == 1) {
								this.$message({
									type: 'success',
									message: '登录成功'
								});
								sessionStorage.setItem('token', res.data.token);
								this.GetCompanyInfo();

								this.$router.push('zpcenter')
							} else {
								this.$message({
									type: 'error',
									message: res.msg
								});
							}
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请输入正确的用户名密码',
							offset: 100
						});
						return false;
					}
				});
			},
		},

	}
</script>
<style>
	.login_page .elinput .el-input__inner {
		padding-left: 62px;
		box-sizing: border-box;
	}
</style>
<style lang="less" scoped>
	@import '../style/mixin';

	.login_page {
		background-color: #324057;
		background-image: url(../../static/image/loginbg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		object-fit: fill;
		font-family: Source Han Sans CN;
		font-weight: 400;

		.active {

			border: 1px solid #2050F4 !important;
			box-shadow: 0px 3px 6px rgba(214, 224, 255, 0.16);
			color: #2050F4 !important;
		}

		.com_userType {
			display: flex;
			margin-bottom: 20px;
		}

		.caozuo {
			justify-content: space-between;
			color: #2050F4;
			font-size: 14px;
			margin: 20px 0px;

			.item {
				cursor: pointer;
			}
		}

		.tip {
			color: #B9B9B9;
			font-size: 14px;
			text-align: left;
			height: 52px;
			line-height: 52px;
			margin-top: 52px;
			border-top: 1px solid #EEEEEE;

			span {
				color: #2050F4;
				cursor: pointer;
			}
		}

		.iconrow {
			position: relative;

			.getcode {
				color: #2050F4;
				font-size: 14px;
				position: absolute;
				right: 20px;
				top: 0px;
				bottom: 0px;
				margin: auto;
				cursor: pointer;
			}

			.icon {
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 20px;
				margin: auto;
				z-index: 999;
				width: 22px;
				height: 22px;
				cursor: pointer;
			}
		}

		.rows {
			width: 100%;
			justify-content: space-between;
			margin-top: 40px;
			margin-bottom: 30px;
			font-size: 14px;

			.item {
				border: 1px solid #E3E7ED;
				color: #333333;
				width: 155px;
				height: 36px;
				line-height: 36px;
				text-align: center;
				cursor: pointer;

			}
		}

		.manage_tip {
			width: 100%;

			p {
				font-size: 26px;
				color: #2050F4;
			}
		}

		.form_contianer {
			width: 410px;
			height: auto;
			padding: 40px 43px 0px;
			box-sizing: border-box;
			text-align: center;
			background-color: #fff;
			position: absolute;
			right: 18%;
			top: 20%;

			.submit_btn {
				width: 100%;
				font-size: 16px;
				background-color: #2050F4 !important;
			}
		}
	}

	.form-fade-enter-active,
	.form-fade-leave-active {
		transition: all 1s;
	}

	.form-fade-enter,
	.form-fade-leave-active {
		transform: translate3d(0, -50px, 0);
		opacity: 0;
	}
</style>
